<template>
	<view>
		<view class="recommandLine"  :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
			<c-nav-bar :title="titleHeader" ></c-nav-bar>
			<view class="title">
				推荐行程
			</view>
			<view class="mainContainer">
				<view v-for="(item, index) in recommandLine" :key="index" class="mainContainer_item"
					@click="goToDetail(item.id)">
					<view class="mainContainer_title">
						{{item.name}}
					</view>
					<view class="ticketList">
						<u-swiper :list="item.coverImage" @change="e => currentNum = e.current" :autoplay="false"
							indicatorStyle="right: 20px" height='380rpx' style="margin-bottom: 30rpx;">
							<view slot="indicator" class="indicator-num">
								<!-- <text class="indicator-num__text">{{ item.coverImage.length||'0 '}}图</text> -->
							</view>·
						</u-swiper>
						<text class="title">{{item.intro}}</text>
						<view class="detail">
							<text>行程历时{{item.planDayNum}}</text>
							<text>{{item.planPlaceNum}}个景区</text>
						</view>
						<view class="ticketList_tag">
							<u-tag :text="i" v-for="(i,idx) in item.tag" :key="idx" type="success" plain size="mini"
								borderColor='#EEEEEE'></u-tag>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				h:uni.getSystemInfoSync().windowHeight - 87,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				titleHeader:'推荐',
				limit: 10,
				page: 1,
				currentNum: null,
				recommandLine: [{
					name: '海景风光',
					coverImage: [
						'https://i.ringzle.com/file/20231024/91f2e5616c254e43a7530f8a7f19dea8.png',
						'https://i.ringzle.com/file/20231024/91f2e5616c254e43a7530f8a7f19dea8.png',
						'https://i.ringzle.com/file/20231024/91f2e5616c254e43a7530f8a7f19dea8.png',
					],
					intro: '走走小梅山,观太湖景色 | 去嵊泗渔港，体验风土人情',
					planDayNum: 3,
					planPlaceNum: 2,
					tag: ["情侣", "家庭", '休闲养生'],
					price: 130,
				}, {
					name: '网红打卡',
					coverImage: [
						'https://i.ringzle.com/file/20231024/53caf638af59499f9f9f013c742a88b0.png',
						'https://i.ringzle.com/file/20231024/53caf638af59499f9f9f013c742a88b0.png',
						'https://i.ringzle.com/file/20231024/53caf638af59499f9f9f013c742a88b0.png',
					],
					intro: '看看花鸟岛景区，赏岛上繁华遍地 | 去六合朝阳，景区，依山傍海 | 嵊泗长滩华美达酒店',
					planDayNum: 2,
					planPlaceNum: 3,
					tag: ["情侣", "家庭", '网红打卡'],
					price: 140,
				}, ],
				detail: '走走小梅山,观太湖景色 | 去嵊泗渔港，体验风土人情',



			}
		},
		onLoad() {
			this.getRecommandList()
		},
		methods: {
			goToDetail(id) {
				// this.$store.commit('appendTravelList', this.travelList)
				uni.navigateTo({
					url: `${'/pagesTrip/custom-travel/routeDetail?id='+ id }`
				})
			},
			getRecommandList(){
				this.$api.get('/api/customrec/recRoutePage', {
					limit: this.limit,
					page: this.page
				}).then(({
					data: res
				}) => {
					this.recommandLine = res.data.list
				})
			}
		}
	}
</script>

<style lang="scss">
	.recommandLine {
		height: 100%;
		margin-top: 20rpx;
		background: #FFFFFF;
		padding: 10rpx 24rpx;
		// padding-top: 130rpx;

		.title {
			font-size: 32rpx;
			font-weight: 400;
			line-height: 0rpx;
			color: #111111;
			margin-top: 40rpx;
		}

		.mainContainer {
			margin-top: 37px;

			&_title {
				font-size: 28rpx;
				font-weight: 600;
				line-height: 32rpx;
				color: #111111;
				margin-top: 20rpx;
				margin-bottom: 30rpx;
			}

			&_item {

				border-bottom: 1px solid #EFEFEF;
			}
		}

		.ticketList {
			width: 98%;
			height: 592rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 25rpx;

			&_tag {
				display: flex;
			}

			&_price {
				display: flex;
				justify-content: space-between;

				button {
					margin-right: 24rpx;
					margin-top: -15rpx;
				}

				&_money {
					width: 92rpx;
					height: 28rpx;
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #FF4141;
					line-height: 28rpx;
					display: flex;
					margin-left: 24rpx;
					margin-top: 14rpx;
				}
			}

			.detail {
				margin: 35rpx 0 15rpx 0;

				text {
					width: 134rpx;
					height: 33rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 0rpx;
					color: #999999;
					opacity: 1;
					margin-right: 10rpx;
				}

				text:last-child {
					color: #007A69;
				}
			}

			.indicator-num__text {
				color: #f3f3f3f9
			}
		}

	}
</style>